<template>
	<div class="copy-right-cont">
		<div class="friend-link-cont">
			<div class="friend-link">
				<span class="link-label">友情链接:</span>
				<div class="links">
					<a :href="item.linkUrl" v-for="item in links" target="_blank">{{item.linkName}}</a>
				</div>
			</div>
		</div>

		<div class="copy-right" :class="{'hasBg': showBg}">
			<span>Copyright©️ 河南省高等学校图书情报工作委员会高职高专分委会 京ICP备 1234567888号-1</span>
			<span>技术支持：河南鑫红日实业有限公司</span>
			<span>客服电话：400-007-8897</span>
		</div>
	</div>
</template>

<script>
	import {
		getLinksApi
	} from '@/api/home'
	export default {
		props: {
			showBg: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				links: this.$store.state.app.links
			}
		},
		created() {
			if (!this.links || this.links.length == 0) {
				this.getLinks()
			}
		},
		methods: {
			getLinks() {
				getLinksApi().then(res => {
					this.links = res.rows
					this.$store.commit('SET_LINKS', res.rows)
				})
			}
		}
	}
</script>

<style lang="less">
	@contWidth: 1400px;

	.copy-right-cont {
		.friend-link-cont {
			background-color: #ccc;
		}

		.friend-link {
			width: @contWidth;
			margin: 0 auto;
			display: flex;
			// justify-content: center;
			align-items: center;
			font-size: 13px;
			padding: 10px 0;
		}

		.link-label {
			color: #333;
			font-size: 15px;
			font-weight: bold;
			margin-right: 10px;
		}

		.links {
			a {
				position: relative;
				padding: 0 10px;
				color: #333;
				text-decoration: unset;

				&:not(:last-child) {

					// border-right: 1px solid #000;
					&:before {
						display: block;
						content: "";
						width: 2px;
						height: 15px;
						background-color: #666;
						position: absolute;
						right: -1px;
						top: 50%;
						transform: translateY(-50%);
					}
				}



				&:hover {
					text-decoration: underline;
				}
			}


		}

		.copy-right {
			width: 100%;
			height: 60px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;


			span {
				font-size: 12px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #666666;
				padding: 2px 0;
			}
		}

		.hasBg {
			background-color: #2a82e4;

			span {
				color: #FFFFFF;
			}
		}
	}
</style>